<template>
  <el-container id="hero">
    <el-header><f-header/></el-header>
    <el-container id="content">
      <el-aside width="200px"><f-aside/></el-aside>
      <el-container id="container">
        <el-main><f-main/></el-main>
        <el-footer><f-footer/></el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import FHeader from "@/components/Forestage/Header.vue";
import FAside from "@/components/Forestage/Aside.vue";
import FMain from "@/components/Forestage/Main.vue";
import FFooter from "@/components/Forestage/Footer.vue";

export default {
  name: "forestage",
  components: {FFooter, FMain, FAside, FHeader},
};
</script>

<style scoped>
.el-header, .el-footer {
  color: #333;
  text-align: center;
}

.el-header{
  background-color: var(--el-bg-color);
  background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
  border-bottom: 1px solid var(--el-border-color);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
}

.el-main {
  padding: 0;
  background-color: #E9EEF3;
  color: #333;
}

#content {
  overflow-y: scroll;
  overflow-x: hidden;
}

#hero {
  height: 100%;
}

aside {
  padding: 0;
}
</style>
